<script setup lang="ts">
defineOptions({
  name: 'PageTitle',
})

defineProps<{
  // 标题
  title?: string
  // 描述
  description?: string
}>()
</script>

<template>
  <div class="page-title">
    <div>
      <div v-if="title" class="page-title-title">
        {{ title }}
      </div>
      <div v-if="description" class="page-title-description">
        {{ description }}
      </div>
    </div>
    <div class="flex-1">
      <slot name="right" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-title {
  padding: 10px 0;
  display: flex;
  align-items: center;

  &-title {
    color: var(--color-text-1);
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 4px;
  }

  &-description {
    color: var(--color-text-3);
    font-size: 14px;
    font-weight: 400;
  }
}
</style>
